<template>
  <page class="level-container">
    <TitleBar title="用户等级管理" refresh />
    <panel class="data-list" title>
      <el-row slot="header">
        <el-col :span="12">
          <span>数据列表</span>
        </el-col>
        <el-col :span="12" style="text-align: right;">
          <el-button @click="addlevelDialog=true">添加用户等级</el-button>
        </el-col>
      </el-row>
      <div class="dbd">
        <el-table
          :data="levelData"
          :header-cell-style="{
            'background-color': '#fafafa',
            'color':'#333',
            'height':'56px',
            'line-height':'56px',
            'font-size':'14px',
            'background': 'rgba(242, 242, 242, 1)'
          }"
        >
          <el-table-column label="等级名称" align="center">
            <template slot-scope="scope">{{ scope.row.levelName }}</template>
          </el-table-column>
          <el-table-column prop="levelCode" label="默认用户等级" align="center" />
          <el-table-column prop="polymerizationCoin" label="聚合金币值满足点" align="center" />
          <el-table-column prop="inviteRewards" label="邀请成功奖励" align="center" />
          <el-table-column prop="shareRewadrs" label="一键分享邀请成功奖励" align="center" />
          <el-table-column prop="punish" label="违规事项扣罚" align="center" />
          <el-table-column prop="action" label="操作" align="center">
            <template slot-scope="scope">
              <el-button type="text" size="small" @click="edithandleClick(scope.row)">编辑</el-button>
              <el-button
                type="text"
                size="small"
                style="color:#FF2C2C; display: none;"
                @click="delhandleClick(scope.row.id)"
              >删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 对话框 -->
      <div class="dialog">
        <el-dialog
          title="提示"
          :before-close="handleClose"
          :visible.sync="addlevelDialog"
          width="844px"
          center
        >
          <div slot="title" class="header-title">
            <span class="title-name">添加用户等级设置</span>
          </div>
          <div class="dialog-bd" style="padding-left: 100px;">
            <el-form
              ref="addForm"
              :rules="rules"
              :model="addForm"
              :label-position="labelPosition"
              label-width="200px"
            >
              <el-form-item label="等级名称:" prop="levelName">
                <el-input v-model="addForm.levelName" type="text" style="width:240px" class="p1" />
                <!-- <el-select v-model="value" placeholder="请选择等级">
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>-->
              </el-form-item>
              <el-form-item label="默认会员等级:">
                <el-select v-model="value" placeholder="0">
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                    disabled
                  />
                </el-select>
              </el-form-item>
              <el-form-item label="用户等级条件:" />
              <el-form-item label="聚合金币满足点:" prop="coin">
                <el-input
                  v-model="addForm.coin"
                  type="text"
                  placeholder="请输入数量"
                  style="width:240px"
                />枚
              </el-form-item>
              <el-form-item label="邀请成功奖励:" prop="success">
                <el-input
                  v-model="addForm.success"
                  type="text"
                  placeholder="请输入数量"
                  style="width:240px"
                />枚/次
              </el-form-item>
              <!-- <el-form-item label="一键分享邀请成功奖励:">
                <el-input
                  v-model="addForm.share"
                  type="text"
                  placeholder="请输入数量"
                  style="width:240px"
                /> 枚/次
              </el-form-item>
              <el-form-item label="违规事项扣罚金币:">
                <el-input
                  v-model="addForm.farecoin"
                  type="text"
                  placeholder="请输入数量"
                  style="width:240px"
                /> 枚/次
              </el-form-item>-->
            </el-form>
          </div>
          <span slot="footer" class="dialog-footer">
            <el-button
              style="width: 100px;height: 40px;background: rgba(204, 204, 204, 1);border-radius: 2px;"
              @click="noEdit();addlevelDialog = false"
            >取 消</el-button>
            <el-button
              type="primary"
              style="width: 100px;height: 40px;background:rgba(72,141,255,1);border-radius: 2px;"
              @click="addlevelform('addForm')"
            >确 定</el-button>
          </span>
        </el-dialog>
      </div>
      <div class="dialog">
        <el-dialog
          title="提示"
          :before-close="handleClose"
          :visible.sync="addlevelDialog2"
          width="844px"
          center
        >
          <div slot="title" class="header-title">
            <span class="title-name">编辑用户等级设置</span>
          </div>
          <div class="dialog-bd" style="padding-left: 100px;">
            <el-form
              ref="addForm2"
              :model="addForm2"
              :rules="rules"
              :label-position="labelPosition"
              label-width="200px"
            >
              <el-form-item label="等级名称:" prop="levelName1">
                <el-input v-model="addForm2.levelName1" type="text" style="width:240px" class="p1" />
              </el-form-item>
              <el-form-item label="默认会员等级:">
                <el-select v-model="value" disabled placeholder="请选择等级">
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                    :disabled="item.disabled"
                  />
                </el-select>
              </el-form-item>
              <el-form-item label="用户等级条件:" />
              <el-form-item label="聚合金币满足点:" prop="polymerizationCoin1">
                <el-input
                  v-model.number="addForm2.polymerizationCoin1"
                  type="text"
                  placeholder="请输入数量"
                  style="width:240px"
                />枚
              </el-form-item>
              <el-form-item label="邀请成功奖励:" prop="inviteRewards1">
                <el-input
                  v-model.number="addForm2.inviteRewards1"
                  type="text"
                  placeholder="请输入数量"
                  style="width:240px"
                />枚/次
              </el-form-item>
            </el-form>
          </div>
          <span slot="footer" class="dialog-footer">
            <el-button
              style="width: 100px;height: 40px;background: rgba(204, 204, 204, 1);border-radius: 2px;"
              @click="noEdit();addlevelDialog2 = false"
            >取 消</el-button>
            <el-button
              type="primary"
              style="width: 100px;height: 40px;background:rgba(72,141,255,1);border-radius: 2px;"
              @click="editlevelform('addForm2')"
            >确 定</el-button>
          </span>
        </el-dialog>
      </div>
    </panel>
    <!-- 分页 -->
    <pagination :pagination="pagination1" @changepage="getData" />
  </page>
</template>
<script>
import {
  getUsersLevel,
  addUsersLevel,
  editUsersLevel,
  delUsersList,
  delUsersLevel,
  getUsersUpdateLevel
} from '@/api/usermanage.js'
export default {
  data() {
    var checkNum = (rule, value, callback) => {
      var bool = /^[1-9]\d*$/.test(~~value)
      if (!bool) {
        return callback(new Error('请输入大于0的整数'))
      } else {
        callback()
      }
    }

    var checkWord = (rule, value, callback) => {
      var bool = /^[\u4e00-\u9fa5]+$/.test(value)
      if (!bool) {
        return callback(new Error('非法输入'))
      } else {
        callback()
      }
    }
    return {
      addlevelDialog: false,
      addlevelDialog2: false,
      rules: {
        levelName1: [{ validator: checkWord, trigger: 'blur' }],
        coin1: [{ validator: checkNum, trigger: 'blur' }],
        success1: [{ validator: checkNum, trigger: 'blur' }],
        polymerizationCoin1: [{ validator: checkNum, trigger: 'blur' }],
        inviteRewards1: [{ validator: checkNum, trigger: 'blur' }],
        levelName: [{ validator: checkWord, trigger: 'blur' }],
        coin: [{ validator: checkNum, trigger: 'blur' }],
        success: [{ validator: checkNum, trigger: 'blur' }],
        polymerizationCoin: [{ validator: checkNum, trigger: 'blur' }],
        inviteRewards: [{ validator: checkNum, trigger: 'blur' }]
      },
      options: [
        {
          value: '0',
          label: '0'
        },
        {
          value: '1',
          label: '1'
        },
        {
          value: '2',
          label: '2'
        },
        {
          value: '3',
          label: '3'
        },
        {
          value: '4',
          label: '4'
        },
        {
          value: '5',
          label: '5'
        },
        {
          value: '6',
          label: '6'
        },
        {
          value: '7',
          label: '7'
        },
        {
          value: '8',
          label: '8'
        },
        {
          value: '9',
          label: '9'
        },
        {
          value: '10',
          label: '10'
        },
        {
          value: '11',
          label: '11'
        },
        {
          value: '12',
          label: '12'
        },
        {
          value: '13',
          label: '13'
        },
        {
          value: '14',
          label: '14'
        },
        {
          value: '15',
          label: '15'
        }
      ],
      value: '',
      testData: [
        {
          userlevel: '普通用户',
          coin: '1',
          yqaward: '+5金币/次',
          fxaward: '+5金币/次',
          penalty: '-5金币/次'
        }
      ],
      levelData: [],
      addForm: {},
      addForm2: { levelName1: null, levelCode1: null, polymerizationCoin1: null, inviteRewards1: null },
      editvalue: '',
      formLabelWidth: '140px',
      labelPosition: 'left',
      pagination1: {},
      name: '',
      pageSize: '6'
    }
  },
  created() {
    this.getData(1)
  },
  methods: {
    // 获取数据
    getData(pageNum) {
      getUsersLevel({
        pageNum,
        pageSize: this.pageSize
      }).then(res => {
        for (let i = 0; i < this.options.length; i++) {
          for (let j = 0; j < res.data.list.length; j++) {
            if (this.options[i].value === res.data.list[j].levelCode) {
              this.options[i].disabled = true
            }
          }
        }
        console.log(this.options)
        this.levelData = res.data.list
        this.pagination1 = res.data
        console.log('aaa', res)
      })
    },
    // 添加数据
    addlevelform(formName) {
      // console.log(this.options)

      this.options.map(item => {
        if (item.value === this.value) {
          this.name = item.label
        }
      })
      const level = {
        levelName: this.addForm.levelName,
        levelCode: this.value,
        polymerizationCoin: this.addForm.coin,
        inviteRewards: this.addForm.success
        // shareRewadrs: this.addForm.share,
        // punish: this.addForm.farecoin
      }
      this.$refs[formName].validate((valid) => {
        if (valid) {
          addUsersLevel(level).then(res => {
            this.getData(1, 6)
            this.$refs[formName].resetFields()
            this.value = ''
            this.addlevelDialog = false
            this.$message.success('添加成功')
          })
        } else {
          this.$message.error('添加失败')
        }
      })
    },
    // 编辑数据
    editlevelform(formName) {
      console.log('22222 :', 22222)
      this.options.map(item => {
        if (item.value === this.value) {
          this.name = item.label
        }
      })
      const userlevel = {
        levelName: this.addForm2.levelName,
        levelCode: this.value,
        polymerizationCoin: this.addForm2.polymerizationCoin,
        inviteRewards: this.addForm2.inviteRewards
        // shareRewadrs: this.addForm.share,
        // punish: this.addForm.farecoin
      }
      // editUsersLevel(userlevel).then(res => {
      //         this.getData(1, 6);
      //         this.addlevelDialog2 = false;
      //         this.value = "";
      //       });
      this.$refs[formName].validate((valid) => {
        if (valid) {
          editUsersLevel(userlevel).then(res => {
            this.getData(1, 6)
            this.addlevelDialog2 = false
            this.value = ''
          })
          this.$message.success('编辑成功')
        } else {
          this.$message.error('编辑失败')
        }
      })
    },
    // 取消
    noEdit() {
      this.value = ''
      this.addlevelDialog = false
      this.addlevelDialog2 = false
    },
    // 关闭
    handleClose(done) {
      this.value = ''
      this.addForm = {}
      // this.addlevelDialog = false
      done()
    },
    // bianj编辑
    edithandleClick(row) {
      this.addForm2.levelName1 = row.levelName
      this.addForm2.levelCode1 = row.levelCode
      this.addForm2.polymerizationCoin1 = row.polymerizationCoin
      this.addForm2.inviteRewards1 = row.inviteRewards
      this.value = row.levelCode
      this.addlevelDialog2 = true
    },
    // 删除
    delhandleClick(id) {
      this.$confirm('确认删除标签吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delUsersList({ ids: id }).then(res => {
          this.getData(1, 6)
        })
      })
    }
    // 添加用户等级
    // addlevelDialog() {
    //   this.isShowlevel = false;
    // },
    // //用户等级权限设置
    // permission() {
    //   this.permission = true;
    // }
  }
}
</script>
<style lang="scss" scoped>
.level-container {
  .data-list {
    .dhead {
      .dh-lef {
        float: left;
        width: 90px;
        height: 16px;
        font-size: 16px;
        font-family: PingFang-SC-Medium;
        font-weight: 500;
        color: rgba(51, 51, 51, 1);
      }
    }
    // 楠
    .dialog {
      .header-title {
        text-align: left;
        .title-name {
          position: relative;
          padding-left: 20px;
          line-height: 1.8em;
        }
        .title-name:before {
          content: "";
          display: block;
          position: absolute;
          top: -1px;
          left: 0px;
          display: block;
          width: 11px;
          height: 20px;
          background: -webkit-gradient(
            linear,
            right top,
            left top,
            from(#4859ff),
            to(#488dff)
          );
          background: linear-gradient(-90deg, #4859ff, #488dff);
          border-radius: 4px;
        }
      }
      .dialog-bd {
        margin: 0 auto;
        p {
          margin-bottom: 30px;
        }
        label {
          height: 14px;
          font-size: 14px;
          font-family: PingFang-SC-Medium;
          font-weight: 500;
          color: #333333;
          text-align: left;
        }
        input {
          width: 100px;
          height: 40px;
          line-height: 40px;
          border: 1px solid rgba(204, 204, 204, 1);
          border-radius: 2px;
        }
        .dialog-footer {
          .el-button {
            width: 100px;
            height: 40px;
            background: rgba(204, 204, 204, 1);
            border-radius: 2px;
          }
        }
      }
    }
  }
}
</style>

